<!-- 展示 》 头像 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="formItem.label" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <div :class="divClass" :style="divStyle">
      <slot :text="model">
        <el-image v-if="model" v-bind="imgProps" />
        <img v-else-if="emptyProps" v-bind="emptyProps" />
      </slot>
    </div>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixShow from '../mixShow'
import FormPhoto from '../../form/FormPhoto'

const name = 'ShowPhoto'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixShow],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      modelPreview: undefined, // 内部预览值
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 填充属性
     */
    fit: FormPhoto.computed.fit,

    /**
     * 图片属性
     */
    imgProps() {
      const { model, modelPreview, fit, pathTrans, noTrans } = this
      const src = noTrans ? model : pathTrans(model)
      const srcPreview = noTrans ? modelPreview : pathTrans(modelPreview)
      return { src, fit, previewSrcList: [srcPreview] }
    },

    /**
     * 空白属性
     */
    emptyProps() {
      const { empty } = this
      return empty ? { src: empty } : null
    },

    /**
     * 内容样式类
     */
    divClass() {
      const { className, square, height, rows } = this
      const content = ''

      if (square) return `${content} ${className} CoreWeb-WebForm-square`
      if (height) return `${content} ${className}`

      // row1 到 row10
      let num = rows
      const array9 = Array(10).fill()
      for (const i of array9.map((_, i) => 10 - i)) {
        if (this[`row${i}`]) num = i
      }
      return `${content} ${className} row${num}`
    },

    /**
     * 内容样式对象
     */
    divStyle() {
      const { getSize, square, squareSize, height } = this
      return {
        width: square ? getSize(squareSize) : null,
        height: getSize(square ? squareSize : height),
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 是否不等 (可覆盖)
     */
    isDiff() {
      const { obj, prop, preview, model, modelPreview, EMPTY } = this
      if (preview && obj[preview] !== (modelPreview || EMPTY)) return true
      if (obj[prop] !== (model || EMPTY)) return true
      return false
    },

    /**
     * 设置内部绑定值 (可覆盖)
     */
    setModel() {
      const { obj, prop, preview, EMPTY } = this
      this.model = obj[prop] || EMPTY
      this.modelPreview = obj[preview || prop] || EMPTY
    },
  },
}
</script>
